<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('模板列表')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">

<div class="container-div">
	<div class="row">

		<div class="col-sm-12 search-collapse">

		</div>

		<div class="btn-group-sm" id="toolbar" role="group" style="display: inline-flex">

			<div style="width:90px">
				<button type="button" class="btn btn-primary btn-sm" onclick="$.operate.openAdd(800,450)" >
					<i class="fa fa-plus"></i> 新增
				</button>
			</div>
			<form id="searchForm">
				<div style="width:200px;display: inline-flex;">
					<div style="width: 70px;height: 32px;line-height: 32px;text-align: right">
						应用：
					</div>
					<div>
						<select id="appCode" name="appCode"  style="width: 100px;">
						</select>
					</div>
				</div>
			</form>
		</div>

		<div class="col-sm-12 select-table table-condensed " style="height:98%;">
			<table id="bootstrap-table"></table>
		</div>
	</div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
	<script th:inline="javascript">
		var editFlag ;
		var removeFlag ;
		var prefix = ctx + "m/template";

		common.loadApp("appCode","",true);
		$('#appCode').select2({
			allowClear: false,
			width:"120"
		});
		$("#appCode").on("change",function () {
			searchPre();
		})


		function queryParams(params) {
			var search = $.table.queryParams(params);
			return search;
		}

		function searchPre() {
			$.table.search('searchForm', 'bootstrap-table');
			$('#appCode').select2({
				allowClear: false,
				width:"120"
			});
		}


		$(function() {
		    var options = {
		        url: prefix + "/page",
		        createUrl: prefix + "/add",
		        updateUrl: prefix + "/edit?id={id}",
		        removeUrl: prefix + "/deleteById",
		        exportUrl: prefix + "/export",
		        modalName: "模板",
				sortName: "createDate",
				sortOrder: "desc",
				method:"get",
				queryParams : queryParams,
		        columns: [
					{
						width:"20%",
						field: 'appCode',
						title: '应用Code',
						align: 'center'
					},
					{
						width:"20%",
						field: 'templateName',
						title: '模板名称',
						align: 'center'
					},
					{
						width:"20%",
						field: 'templateKey',
						title: '模板key',
						align: 'center'
					},
					{
						width:"20%",
						field: 'templateDesc',
						title: '模板描述',
						align: 'center'
					},
					{
						width:"20%",
						field: 'createDate',
						title: '创建时间',
						sortable: false,
						align: "center"
					},
					{
						width:"20%",
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\',780,450)"><i class="fa fa-edit"></i>编辑</a> ');
							actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
							return actions.join('');
						}
					}]
		    };
		    $.table.init(options);

		});

	</script>
</body>
</html>